<template>
	<el-button :icon="Service" @click="drawerShow = true">选择音频</el-button>
	<el-drawer v-model="drawerShow" size="70%" :destroy-on-close="true" :with-header="false">
		<el-tabs v-model="activeName" class="demo-tabs">
			<el-tab-pane label="我的音频" name="select">
				
			</el-tab-pane>
			<el-tab-pane label="音频上传" name="upload">
				<el-upload  drag
					:action="action" :show-file-list="false"  name="audio_file" :data="actionData" :on-change="fileChange" accept="mp3,m4a">
					<el-icon class="el-icon--upload">
						<UploadFilled />
					</el-icon>
					<div class="el-upload__text">点击或拖拽文件到此处上传</div>
					<div class="el-upload__text">格式要求：大小≤20M，仅支持mp3、m4a音频格式</div>
				</el-upload>
			</el-tab-pane>
		</el-tabs>
		
		<template #footer>
			<el-row :gutter="20">
				<el-col :span="16">
					<div class="selectedList">
						<div class="selected-item" v-for="(item,index) in selectedAudios">
							<el-button v-if="playstatus=='pause'" icon="Headset" circle @click="play"/>
							<el-button v-if="playstatus=='play'" icon="VideoPause" circle @click="play"/>
						</div>
						<audio ref="player" :src="playItem"></audio>
					</div>
				</el-col>
				<el-col :span="8">
					<div class="dialog-footer">
						<el-button @click="drawerShow = false">取消</el-button>
						<el-button type="primary" @click="onReceive">
							确认({{selectedAudios.length}}/{{limit}})
						</el-button>
					</div>
				</el-col>
			</el-row>
		
		
		
		</template>
	</el-drawer>
	
</template>

<script setup lang="ts">
	import { Service } from '@element-plus/icons-vue'
	import { getAudioList } from '@/api/material'
	import { ElMessage, ElMessageBox } from 'element-plus'
	import { ref } from 'vue'
	defineOptions({
		name: 'OceanEngineMusic',
	})
	const props = defineProps({
		advertiser_id: {
			type: Number,
			default: null,
		},
		limit: {
			type: Number,
			default: 1
		}
	})
	const drawerShow = ref(false)
	const activeName = ref("select")
	const emit = defineEmits(['receive'])
	const onReceive = () => {
		drawerShow.value = false
	};
	const page = ref(1)
	const page_size = ref(10)
	const tableData = ref({ list: [], page_info: {} })
	const getList = () => {
		let params = {
			page: page.value,
			page_size: page_size.value,
			advertiser_id: props.advertiser_id,
			sources:["AD_SITE","OPEN_API","TTS_TEXT_TO_AUDIO"]
		}
		getAudioList(params).then(res => {
			if (res.code == 0) {
				tableData.value.list = res.data.list
				tableData.value.page_info = res.data.page_info
			}
		})
	}
	getList()
	const action = ref()
	action.value = import.meta.env.VITE_BASE_API+"/openApi/file/audio/ad/"
	const actionData = {
		advertiser_id:props.advertiser_id,
		upload_type:"UPLOAD_BY_FILE",
	}
	const fileChange = (e) => {
		if(e.status=="success"){
			if(e.response.code == "0"){
				//selectedAudios.value.push(e.response.data.audio_info)
				selectedAudios.value[0] = e.response.data.audio_info
				playItem.value = e.response.data.audio_info.audio_url
			}else{
				ElMessage({
				  type: 'danger',
				  message: e.response.message
				})
			}
		}
		
	}
	const selectedAudios = ref([])
	const selectRemove = (index)=>{
		selectedAudios.value.splice(index, 1)
	}
	const playItem = ref()
	const player = ref(null)
	const playstatus = ref("pause")
	const play = ()=>{
		if(playstatus.value == "pause"){
			player.value.play();
			playstatus.value = "play"
		}else{
			player.value.pause();
			playstatus.value = "pause"
		}	
	}
</script>

